<template>
    <el-affix>
 <header>
<span>
<el-icon class="icono" @click="qweasd"><Back /></el-icon>

</span>
<span class="baga">
    评论列表
</span>


  </header>
  </el-affix>

<div class="hz" v-for="(item, index) in List1"
      :key="index">

  <div class="shang">
    <img src="@/assets/y2.png" alt="">
<span>{{ item.nickName }}</span>

  </div>
<div class="zhong">
<p>
    {{item.content}}
</p>

</div>
<div class="xia">
  <div class="xy">
{{item.commentTime}}
  </div>
  <div class="xe">

<!-- <img src="@/assets/点赞.png" alt="" class="dz">

      <span class="dz1">99</span>
      <img src="@/assets/采纳.png" alt="" class="cn">
      <span class="cn1">采纳</span>
      <img src="@/assets/踩.png" alt="" class="cai">
      <span class="cai1">5</span>
      <span></span> -->
  <div class="btn" >
      <div class="btn1" @click="toggleFavorite">
                            <span v-if="isFavorited">
                                <img style=" width:.8rem;height: .8rem;" src="@/assets/赞2.png" alt="">
                                <span style="  line-height: 1rem;margin-left:1rem;" >
                                    {{item.opinion + 1}}
                                </span>
                            </span>
                            <span v-else>
                                <img style="width:.8rem;height: .8rem;" src="@/assets/赞1.png" alt="">
                                <span style="  line-height: 1rem;margin-left:1rem;" >
                                    {{item.opinion}}
                                </span>
                            </span>
                            <i v-if="isFavorited" class="fas fa-heart"></i>
                            <i v-else="isFavorited" class="far fa-heart"></i>
                            <!-- {{ List1.collectionNum }} -->
                        </div>
                        <div class="btn1" @click="toggleFavorite1">
                            <span v-if="isFavorited1">
                                <img style="width:.8rem;height: .8rem;" src="@/assets/不赞2.png" alt="">
                                <span style="  line-height:1rem;margin-left:1rem;" >
                                    {{item.opposeNum + 1}}
                                </span>
                            </span>
                            <span v-else>
                                <img style="width:.8rem;height: .8rem;" src="@/assets/不赞1.png" alt="">
                                <span style="  line-height: 1rem;margin-left:1rem;" >
                                    {{item.opposeNum}}
                                </span>
                            </span>
                            <i v-if="isFavorited1" class="fas fa-heart"></i>
                            <i v-else="isFavorited1" class="far fa-heart"></i>
                        </div>
                          <!-- <button style="margin-left: 20vw" @click="caina(item.commentId)">采纳</button> -->
                        <div class="btn1" @click="toggleFavorite2(item.commentId)">
                            <span v-if="isFavorited2">
                                <img style="width: .9rem;height: .9rem;margin-bottom: .2rem;" src="@/assets/采纳2.png" alt="" >
                                <span style="  line-height:1rem;margin-left:1.1rem;" >
                                    {{item.whetherDoctor + 1}}
                                </span>
                            </span>
                            <span v-else>
                                <img style="width:.9rem;height: .9rem;margin-bottom: .2rem;" src="@/assets/采纳1.png" alt="" >
                                <span style="  line-height:1rem;margin-left:1.1rem;" >
                                    {{item.whetherDoctor}}
                                </span>
                                
                            </span>
                            <i v-if="isFavorited2" class="fas fa-heart" style="margin-bottom: .2rem;"></i>
                            <i v-else="isFavorited2" class="far fa-heart" style="margin-bottom: .2rem;"></i>
                            <!-- {{ List1.collectionNum }} -->
                        </div>
                    </div>





  </div>
</div>

</div>
<div class="hz">

  <div class="shang">
    <img src="@/assets/y1.png" alt="">
<span>小美子</span>

  </div>
<div class="zhong">
<p>
  激发爱上大家看看广发卡举报独守鼓房白金卡高世界公司附近感觉十分苦恼赶尽杀绝功发多少个含苞待放换个地方说服对方公司的方式的法国电视跪地上能十分
</p>

</div>
<div class="xia">
  <div class="xy">


    07/04/2018
  </div>
  <div class="xe">
<img src="@/assets/点赞fen.png" alt="" class="dz">
      <span class="dz1">99</span>
      <img src="@/assets/采纳.png" alt="" class="cn">
      <span class="cn1">采纳</span>
      <img src="@/assets/踩.png" alt="" class="cai">
      <span class="cai1">5</span>
      <span></span>
  </div>
</div>

</div>

<div class="hz">

  <div class="shang">
    <img src="@/assets/y2.png" alt="">
<span>小悦子</span>

  </div>
<div class="zhong">
<p>
的功夫当时的返回战术打法啊 啊 速度花费不少地方爱的色放和爸爸发啊开间房举报啊对口帮扶机卡绑定激发爱上大家看看广发卡举报独守鼓房白金卡高世界公司附近感觉十分苦恼赶尽杀绝功能十分
</p>

</div>
<div class="xia">
  <div class="xy">
    07/04/2018
  </div>
  <div class="xe">
<img src="@/assets/点赞.png" alt="" class="dz">
      <span class="dz1">99</span>
      <img src="@/assets/采纳.png" alt="" class="cn">
      <span class="cn1">采纳</span>
      <img src="@/assets/踩lv.png" alt="" class="cai">
      <span class="cai1">5</span>
      <span></span>
  </div>
</div>

</div>
<div class="hz">

  <div class="shang">
    <img src="@/assets/y2.png" alt="">
<span>小妮子</span>

  </div>
<div class="zhong">
<p>
  激发爱上大家看看广发卡举报独守鼓房白金卡高世界公司附近感觉十分苦恼赶尽杀绝功能十分
</p>

</div>
<div class="xia">
  <div class="xy">
    07/04/2018
  </div>
  <div class="xe">
<img src="@/assets/点赞.png" alt="" class="dz">
      <span class="dz1">99</span>
      <img src="@/assets/采纳.png" alt="" class="cn">
      <span class="cn1">采纳</span>
      <img src="@/assets/踩.png" alt="" class="cai">
      <span class="cai1">5</span>
      <span></span>
  </div>
</div>

</div>

</template>

<script setup lang="ts">


import { ref } from 'vue'
import dayjs from 'dayjs'
import axios from 'axios';
import { request } from '../../axios/request'
import { useRouter, useRoute } from 'vue-router'

import { adoptionProposal, findMySickCircleCommentList } from '@/api/search'
const sickCircleId = localStorage.getItem('sickCircleId')
const sessionId = ref(Number(localStorage.getItem('sessionId')?.replace(/"/g, '')) || 0)
const userId = ref(localStorage.getItem('userId'))
const route = useRoute()
const router = useRouter()

const List1 = ref([])
const getList1 = async () => {

 const res1 = await axios.get('/health/user/sickCircle/v1/findSickCircleCommentList',
        { params: { userId: userId, sessionId: sessionId, sickCircleId: sickCircleId, page: 1, count: 30 } })
    console.log(res1.data.result);
    List1.value = res1.data.result;

}
getList1()
const isFavorited = ref(false);
const toggleFavorite = () => {

    isFavorited.value = !isFavorited.value;
    // 将收藏状态存储到本地存储中
    localStorage.setItem('isFavorited', isFavorited.value.toString());
};
const isFavorited1 = ref(false);

const toggleFavorite1 = () => {
    isFavorited1.value = !isFavorited1.value;
    // 将收藏状态存储到本地存储中
    localStorage.setItem('isFavorited1', isFavorited1.value.toString());
};
const isFavorited2 = ref(false);

// const caina=async(commentId:number)=>{
//     const res=await adoptionProposal(userId.value,sessionId.value,{
//         commentId:commentId,
//         sickCircleId:sickCircleId,
//     })
//     console.log("采纳评论",res);
// }
const toggleFavorite2 = async(commentId:numbe) => {
   const res=await adoptionProposal(userId.value,sessionId.value,{
        commentId:commentId,
        sickCircleId:sickCircleId,
    })
    console.log("采纳评论",res);
    isFavorited2.value = !isFavorited2.value;
    // 将收藏状态存储到本地存储中
    localStorage.setItem('isFavorited2', isFavorited2.value.toString());
};


// // 获取id
// const doctorId = ref(route.query.id)

// // 获取评论列表
// const reviewList:any = ref([])


// const getReview = async () => {
//   await request
//     .get('/health/user/sickCircle/verify/v1/findMySickCircleCommentList', {
//       params: {
//         doctorId: doctorId.value,
//         page: 1,
//         count: 10
//       }
//     })
//     .then((res) => {
//       let { message, result, status } = res
//       if (status === '0000') {
//         console.log(message)
//         reviewList.value = result
//         result.forEach((item: any, index: number) => {
//           console.log(item.commentTime)
//           const timestamp = item.commentTime
//           const formattedDate = ref('')
//           if (timestamp) {
//             formattedDate.value = dayjs(timestamp).format('YYYY-MM-DD HH:mm')
//           }
//           result[index].commentTime = formattedDate.value
//           console.log(formattedDate.value)
//         })
//         console.log(reviewList.value)
//       }
//     })
// }
// getReview()


const qweasd=()=>{
  router.back()
}


</script>

<style scoped lang="scss">


*{
  margin: 0;
  padding: 0;
}
 .btn{

  width: 100%;
  height: 1rem;
        display: flex;

            justify-content: space-around;
          .btn1{
                       width: 100%;
                       height: 1rem;
                        margin-left: 3vw;
                        display: flex;

                    }
                }
header{
    width: 100%;
    height:  1.2rem; // 1.2rem * 0.5
    line-height: 0.6rem;
    background-color: #fff;
    border-bottom: 0.2rem solid rgb(242, 242, 242); // 0.2rem * 0.5
    display: flex;
    align-items: center;
    position: relative;
 .icono{
        font-size: 0.6rem; // 0.6rem * 0.5
        position: absolute;
        top: 28%; // 28% * 0.5
        left: 6%; // 6% * 0.5
    }
 .baga{
        font-size: 0.4rem; // 0.4rem * 0.5
        font-weight: 600;
        margin-left: 43%; // 43% * 0.5
    }

}
.hz{
  width: 100%;
  height: 5rem; // 5rem * 0.5
  margin-bottom: 0.5rem; // 0.5rem * 0.5
  border-bottom: 0.15rem solid rgb(242, 242, 242); // 0.15rem * 0.5
 .shang{
    width: 100%;
    height: 2rem; // 2rem * 0.5
    position: relative;
    img{
      width: 1.2rem; // 1.2rem * 0.5
      height: 1.2rem; // 1.2rem * 0.5
      border-radius: 50%;
      position: absolute;
      top: 12%; // 12% * 0.5
      left: 5%; // 5% * 0.5
    }
    span{
      position: absolute;
      top: 29%; // 29% * 0.5
      font-size: 0.45rem; // 0.45rem * 0.5
      left: 20%; // 20% * 0.5
    }
  }
 .zhong{
    width: 94%;
    height: 1rem; // 2rem * 0.5
    margin-left:  0.3rem; // 0.3rem * 0.5
    p{
      margin-left:  0.2rem; // 0.2rem * 0.5
      font-size: 0.3rem; // 0.3rem * 0.5
      color: #676565;
    }
  }
 .xia{
    width: 100%;
    height: 1rem; // 1rem * 0.5
    margin-top: 30px;
    position: relative;
 .xy{
      width: 2rem; // 2rem * 0.5
      height: 1rem; // 1rem * 0.5
      line-height: 0.5rem;
      margin-left:  .3rem; // 0.1rem * 0.5
      position: absolute;
      top: 0;
      left:  0.2rem; // 0.2rem * 0.5
    }
 .xe{
      width: 5rem; // 5rem * 0.5
      height: 0.5rem;
      position: absolute;
      top: 0;
      right: 0.3rem; // 0.3rem * 0.5
      img{
        width: 0.8rem; // 0.8rem * 0.5
        height: 0.8rem; // 0.8rem * 0.5
        margin-top: 0.1rem; // 0.1rem * 0.5
        position: absolute;
      }
     .dz{
        top: 0;
        left: 10%;
      }
     .dz1{
        left: 26%;
      }
     .cai{
        left: 38%;
      }
     .cai1{
        left: 54%;
      }
     .cn{
        left: 62%;
      }
     .cn1{
        left: 79%;
      }
      span{
        position: absolute;
        top: 30%; // 30% * 0.5
        font-size: 0.4rem; // 0.4rem * 0.5
      }
    }
  }
}

</style>
